<template>
  <view>
    <u-popup :show="showfalg" mode="center">
      <view style="font-size: 24rpx; padding-bottom: 20rpx">
        <view class="u-flex u-flex-between title">
          <view class=""> 安全验证 </view>
          <u-icon name="close" @click="closetap"></u-icon>
        </view>
        <view
          class=""
          style="margin: 20rpx; position: relative; overflow: hidden"
        >
          <u--image
            :showLoading="true"
            :src="originalImageBase64"
            width="660rpx"
            height="310rpx"
          ></u--image>
          <view class="jigsawImage" :style="[imgstyle]">
            <u--image
              :showLoading="true"
              :src="jigsawImageBase64"
              width="50px"
              height="310rpx"
            ></u--image>
          </view>
        </view>
        <view class="">
          <!-- {{value}} -->
          <u-slider-yzm v-model="value" @change="change"></u-slider-yzm>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      showfalg: false,
      jigsawImageBase64: "",
      originalImageBase64: "",
      value: "0",
      secretKey: "",
      token: "",
    };
  },
  computed: {
    imgstyle() {
      return {
        left: `${this.value}%`,
      };
    },
  },
  methods: {
  
    async show() {
      this.value = "0";
      this.showfalg = true;
      let data = await this.$z.request("/code/create", "", "get");
      this.jigsawImageBase64 =
        "data:image/png;base64," + data.data.repData.jigsawImageBase64;
      this.originalImageBase64 =
        "data:image/png;base64," + data.data.repData.originalImageBase64;
      this.secretKey = data.data.repData.secretKey;
      this.token = data.data.repData.token;
    },
    closetap() {
      this.showfalg = false;
    },
    async change() {
      var moveLeftDistance = (this.value * 305) / 100;
      console.log(
        JSON.stringify({
          x: moveLeftDistance,
          y: 5.0,
        }),
        this.secretKey
      );
      let reqdata = {
        captchaType: "blockPuzzle",
        pointJson: this.$z.ase(
          JSON.stringify({
            x: moveLeftDistance,
            y: 5.0,
          }),
          this.secretKey
        ),
        token: this.token,
      };
      // reqdata = {
      // 	captchaType: "blockPuzzle",
      // 	pointJson: "KrDEoCpN88nloJGZu3hctLgCGqcfU96Gh25HP9NPkKw=",
      // 	token: "d9bf74cbbd8e4182afe1d3a63539c81b"
      // }
      let data = await this.$z.request(
        `/code/check?${qs.stringify(reqdata)}`,
        {},
        "POST"
      );
      data = data.data;
      if (data.repCode == "0000") {
        var captchaVerification = this.$z.ase(
          this.token +
            "---" +
            JSON.stringify({
              x: moveLeftDistance,
              y: 5.0,
            }),
          this.secretKey
        );
        this.$emit("success", {
          captchaVerification: captchaVerification,
        });
        this.showfalg = false;
        console.log(captchaVerification);
      } else {
        uni.$u.toast("验证失败");
        this.show();
      }

      console.log(moveLeftDistance, data.repMsg);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  height: 80rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.jigsawImage {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
